<template>
  <van-nav-bar fixed left-arrow @click-left="onClickLeft" />
  <van-tabs v-model:active="active" color="#fbc546" scrollspy sticky>
    <van-tab title="商品">
      <!-- 1. 轮播图 -->
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="#1989fa"
        lazy-render
      >
        <van-swipe-item style="height: 375px" v-for="(item,index) in swiper" :key="index">
          <van-image
            width="375px"
            height="100%"
            :src="item"
          />
        </van-swipe-item>
      </van-swipe>
      <!-- 2. 商品信息 -->
      <van-cell class="productInfo">
        <div class="priceShare">
          <div class="price">¥ 3699.01</div>
          <van-icon name="share-o" size="20" />
        </div>
        <div class="productDes">
          {{productInfo?.store_name}}
        </div>
        <div class="salesBox">
          <div class="curPrice">原价: ¥ {{productInfo?.ot_price}}</div>
          <div class="repertory">库存：{{productInfo?.stock}} {{productInfo?.unit_name}}</div>
          <div class="sales">销量：{{productInfo?.fsales}}</div>
        </div>
      </van-cell>
      <!-- 3. 商品选择 -->
      <van-cell
        class="productSelect"
        title="已选择：陶瓷黑，8GB+128GB"
        is-link
        @click="changestyle"
      />
      <van-popup
        v-model:show="show"
        position="bottom"
        :style="{ height: '30%' }"
      />
    </van-tab>
    <van-tab title="评价">
      <van-cell :title="replyInfo" :value="replyRate" is-link />
      <estimate :reply='reply'></estimate>
    </van-tab>
    <van-tab title="推荐">
      <van-cell-group title="推荐商品">
        <div class="productsBox">
          <van-cell
            class="productItem" 
            v-for="item in 6" 
            :key="item"
          >
            <van-image
              width="107px"
              height="107px"
              src="https://shop.fed.lagou.com/uploads/attach/2021/07/20210719/512f2ee75f883f46e718bd9496edcc22.jpg"
            ></van-image>
            <div class="title">
              鸿星尔克奇弹2.0跑鞋pro时尚透气女鞋夏季网面碳板科技减震运动鞋专业跑步鞋
            </div>
            <div class="price">¥ 539.00</div>
          </van-cell>
        </div>
      </van-cell-group>
    </van-tab>
    <van-tab title="详情">
      <div class="detailBox">123</div>
    </van-tab>
  </van-tabs>
</template>
<script setup>
import { computed, ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
import estimate from "@/components/estimate/index.vue";
import { productDetail } from '@/api/product'
// 获取当前项
const { productId } = defineProps({
  productId: {
    type: String,
    required: true
  }
})
const router = useRouter();
// 跳转到首页
const onClickLeft = () => {
  router.push({
    name: "home",
  });
};
// 单个商品详情获取
const productItemDetail = ref({})
const productItem = async () => {
  let { data } = await productDetail(productId)
  if (data.status == 200) {
    productItemDetail.value = data.data
  } else {
    return
  }
}
productItem()
const productInfo = computed(()=>productItemDetail.value.storeInfo)
const swiper = computed(()=>productInfo.value?.slider_image)
// 用户评价
const replyCount = computed(()=>productItemDetail.value.replyCount || 0)
const replyInfo = computed (()=>`用户评价(${ replyCount.value })`)
// 好评率
const replyChance = computed(()=>productItemDetail.value.replyChance || 0)
const replyRate = computed(()=>`${replyChance.value}%好评率`)
// 用户评价
const reply = computed(()=>productItemDetail.value.reply)
const active = ref(0);
// 商品弹出层
const show = ref(false);
const changestyle = () => {
  show.value = !show.value;
};
</script>
<style lang="scss" scoped>
.van-nav-bar {
  position: fixed !important;
}
.van-tabs {
  background: #f2f2f2;
  margin-bottom: 50px;
  // height: 1500px;
  :deep(.van-tabs__wrap) {
    width: 90%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
  }
  :deep(.van-tabs__content) {
    padding-top: 46px;
  }
}
.productInfo {
  padding: 10px 16px;
  margin-bottom: 8px;
  .priceShare {
    display: flex;
    justify-content: space-between;
    .price {
      font-size: 24px;
      font-weight: 700;
    }
  }
  .productDes {
    font-size: 16px;
    font-weight: 700;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    overflow: hidden;
    margin: 5px 0 10px;
  }
  .salesBox {
    color: #969799;
    display: flex;
    justify-content: space-between;
  }
}
.productSelect {
  margin-bottom: 8px;
}
:deep(.van-cell-group__title) {
  background: #fff;
  font-size: 16px;
  font-weight: 700;
  color: #323233;
}
.productsBox {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  .van-cell{
    padding: 0;
  }
  .productItem {
    width: 125px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .title {
      padding: 0 3px;
      font-size: 14px;
      font-weight: 700;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 这里是超出几行省略 */
      overflow: hidden;
    }
    .price{
      color: #F2270C;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 3px;
    }
  }
}
.detailBox{
  margin-top: 5px;
  background: #fff;
}
</style>
